<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QQ飞车赛车图鉴 - 原型设计</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* 全局样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background-color: #f5f7fa;
            color: #333;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .prototype-section {
            margin-bottom: 50px;
            background: #fff;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            padding: 25px;
            position: relative;
        }
        
        .section-title {
            color: #0078ff;
            font-size: 24px;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #eaeaea;
            display: flex;
            align-items: center;
        }
        
        .section-title i {
            margin-right: 10px;
        }
        
        /* 导航栏样式 */
        .navbar {
            background: linear-gradient(135deg, #3a8bff 0%, #0052cc 100%);
            padding: 15px 30px;
            color: white;
            border-radius: 10px;
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .logo {
            font-size: 22px;
            font-weight: bold;
            display: flex;
            align-items: center;
        }
        
        .logo i {
            margin-right: 10px;
        }
        
        .nav-links {
            display: flex;
            gap: 20px;
        }
        
        .nav-links a {
            color: white;
            text-decoration: none;
            padding: 8px 12px;
            border-radius: 5px;
            transition: background 0.3s;
        }
        
        .nav-links a:hover {
            background: rgba(255, 255, 255, 0.2);
        }
        
        .user-actions {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .search-box {
            position: relative;
        }
        
        .search-box input {
            padding: 8px 15px;
            padding-left: 35px;
            border-radius: 20px;
            border: none;
            width: 250px;
        }
        
        .search-box i {
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: #888;
        }
        
        /* 首页样式 */
        .hero-section {
            display: flex;
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .hero-content {
            flex: 1;
            padding: 30px;
            background: linear-gradient(135deg, #ff6b6b 0%, #ff9e9e 100%);
            border-radius: 10px;
            color: white;
        }
        
        .hero-content h1 {
            font-size: 32px;
            margin-bottom: 15px;
        }
        
        .hero-content p {
            font-size: 16px;
            margin-bottom: 20px;
            opacity: 0.9;
        }
        
        .hero-content button {
            background: white;
            color: #ff6b6b;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            font-weight: bold;
            cursor: pointer;
            transition: transform 0.3s;
        }
        
        .hero-content button:hover {
            transform: translateY(-3px);
        }
        
        .featured-section {
            margin-bottom: 30px;
        }
        
        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .section-header h2 {
            font-size: 20px;
            color: #333;
        }
        
        .view-all {
            color: #0078ff;
            text-decoration: none;
            display: flex;
            align-items: center;
        }
        
        .view-all i {
            margin-left: 5px;
        }
        
        .card-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 20px;
        }
        
        .card {
            background: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s;
        }
        
        .card:hover {
            transform: translateY(-5px);
        }
        
        .card-img {
            height: 150px;
            background-color: #eee;
            background-position: center;
            background-size: cover;
            position: relative;
        }
        
        .card-badge {
            position: absolute;
            top: 10px;
            right: 10px;
            background: rgba(0, 0, 0, 0.6);
            color: white;
            padding: 5px 10px;
            border-radius: 20px;
            font-size: 12px;
        }
        
        .card-content {
            padding: 15px;
        }
        
        .card-title {
            font-size: 16px;
            margin-bottom: 5px;
            font-weight: bold;
        }
        
        .card-meta {
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            color: #666;
        }
        
        .card-rating {
            color: #ff9800;
            display: flex;
            align-items: center;
        }
        
        .card-rating span {
            margin-left: 5px;
        }
        
        /* 图鉴列表页样式 */
        .filters {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 15px;
            margin-bottom: 20px;
            padding: 20px;
            background: #f9f9f9;
            border-radius: 10px;
        }
        
        .filter-group {
            display: flex;
            flex-direction: column;
        }
        
        .filter-group label {
            font-size: 14px;
            margin-bottom: 5px;
            color: #555;
        }
        
        .filter-group select, .filter-group input {
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        
        .filter-actions {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 20px;
        }
        
        .filter-actions button {
            padding: 8px 15px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        
        .apply-btn {
            background: #0078ff;
            color: white;
        }
        
        .reset-btn {
            background: #eee;
            color: #333;
        }
        
        .list-view {
            margin-top: 20px;
        }
        
        .list-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;
        }
        
        .view-options {
            display: flex;
            gap: 10px;
        }
        
        .view-options button {
            background: #f5f5f5;
            border: none;
            padding: 8px;
            border-radius: 5px;
            cursor: pointer;
        }
        
        .view-options button.active {
            background: #0078ff;
            color: white;
        }
        
        .sort-options {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .sort-options select {
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        
        .pagination {
            display: flex;
            justify-content: center;
            margin-top: 30px;
            gap: 10px;
        }
        
        .pagination button {
            width: 40px;
            height: 40px;
            border: 1px solid #ddd;
            background: #fff;
            border-radius: 5px;
            cursor: pointer;
        }
        
        .pagination button.active {
            background: #0078ff;
            color: white;
            border: none;
        }
        
        /* 详情页样式 */
        .detail-header {
            display: flex;
            gap: 30px;
            margin-bottom: 30px;
        }
        
        .detail-image {
            width: 400px;
            height: 250px;
            background-color: #eee;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            position: relative;
        }
        
        .image-nav {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 5px;
        }
        
        .image-nav-dot {
            width: 10px;
            height: 10px;
            background: rgba(255, 255, 255, 0.5);
            border-radius: 50%;
        }
        
        .image-nav-dot.active {
            background: white;
        }
        
        .detail-info {
            flex: 1;
        }
        
        .detail-title {
            font-size: 28px;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .detail-title .btn-group {
            display: flex;
            gap: 10px;
        }
        
        .detail-title button {
            padding: 8px 15px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .btn-primary {
            background: #0078ff;
            color: white;
        }
        
        .btn-outline {
            background: white;
            color: #333;
            border: 1px solid #ddd;
        }
        
        .detail-meta {
            display: flex;
            margin-bottom: 20px;
            color: #666;
            font-size: 14px;
        }
        
        .detail-meta div {
            margin-right: 20px;
            display: flex;
            align-items: center;
        }
        
        .detail-meta i {
            margin-right: 5px;
        }
        
        .rating-large {
            display: flex;
            align-items: center;
            gap: 5px;
            margin-bottom: 20px;
        }
        
        .rating-large .stars {
            color: #ff9800;
            font-size: 24px;
        }
        
        .rating-large .rating-value {
            font-size: 24px;
            font-weight: bold;
        }
        
        .rating-large .rating-count {
            color: #666;
            font-size: 14px;
        }
        
        .property-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }
        
        .property-table th, .property-table td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #eee;
        }
        
        .property-table th {
            background: #f5f7fa;
            font-weight: normal;
            color: #666;
            width: 40%;
        }
        
        .tabs {
            margin-top: 40px;
            border-bottom: 1px solid #eee;
            display: flex;
            gap: 30px;
            margin-bottom: 20px;
        }
        
        .tab {
            padding: 10px 5px;
            cursor: pointer;
            position: relative;
            color: #666;
        }
        
        .tab.active {
            color: #0078ff;
            font-weight: bold;
        }
        
        .tab.active:after {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            bottom: -1px;
            height: 3px;
            background: #0078ff;
        }
        
        .tab-content {
            margin-bottom: 30px;
        }
        
        .comments-section {
            margin-top: 20px;
        }
        
        .comment-form {
            margin-bottom: 30px;
        }
        
        .comment-form textarea {
            width: 100%;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
            margin-bottom: 10px;
            resize: vertical;
            min-height: 100px;
        }
        
        .form-actions {
            display: flex;
            justify-content: flex-end;
        }
        
        .comment-list {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        
        .comment {
            padding: 20px;
            background: #f9f9f9;
            border-radius: 10px;
        }
        
        .comment-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
        }
        
        .commenter {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .commenter-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #ddd;
            overflow: hidden;
        }
        
        .commenter-name {
            font-weight: bold;
        }
        
        .comment-date {
            color: #888;
            font-size: 14px;
        }
        
        .comment-content {
            margin-bottom: 10px;
        }
        
        .comment-actions {
            display: flex;
            gap: 15px;
            color: #666;
            font-size: 14px;
        }
        
        .comment-action {
            display: flex;
            align-items: center;
            gap: 5px;
            cursor: pointer;
        }
        
        /* 用户中心样式 */
        .profile-header {
            display: flex;
            gap: 30px;
            margin-bottom: 30px;
            align-items: center;
        }
        
        .profile-avatar {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            background: #ddd;
            overflow: hidden;
            position: relative;
        }
        
        .edit-avatar {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 5px;
            background: rgba(0, 0, 0, 0.5);
            color: white;
            text-align: center;
            font-size: 12px;
            cursor: pointer;
        }
        
        .profile-info {
            flex: 1;
        }
        
        .profile-name {
            font-size: 24px;
            margin-bottom: 5px;
        }
        
        .profile-bio {
            color: #666;
            margin-bottom: 15px;
        }
        
        .profile-stats {
            display: flex;
            gap: 20px;
        }
        
        .stat {
            text-align: center;
        }
        
        .stat-value {
            font-size: 20px;
            font-weight: bold;
        }
        
        .stat-label {
            color: #666;
            font-size: 14px;
        }
        
        .profile-actions {
            display: flex;
            gap: 10px;
        }
        
        .profile-content {
            display: flex;
            gap: 30px;
        }
        
        .profile-sidebar {
            width: 250px;
        }
        
        .profile-menu {
            background: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
        }
        
        .profile-menu-item {
            padding: 15px 20px;
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            border-bottom: 1px solid #eee;
        }
        
        .profile-menu-item:last-child {
            border-bottom: none;
        }
        
        .profile-menu-item.active {
            background: #f5f7fa;
            color: #0078ff;
            font-weight: bold;
        }
        
        .profile-menu-item i {
            width: 20px;
        }
        
        .profile-main {
            flex: 1;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 5px;
            color: #666;
        }
        
        .form-group input, .form-group textarea, .form-group select {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        
        .form-group textarea {
            resize: vertical;
            min-height: 100px;
        }
        
        /* 比较工具样式 */
        .compare-container {
            display: flex;
            gap: 20px;
        }
        
        .compare-item {
            flex: 1;
            text-align: center;
        }
        
        .compare-image {
            width: 100%;
            height: 180px;
            background: #eee;
            border-radius: 10px;
            margin-bottom: 15px;
        }
        
        .compare-title {
            font-size: 18px;
            margin-bottom: 10px;
        }
        
        .compare-properties {
            text-align: left;
        }
        
        .compare-property {
            padding: 12px;
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid #eee;
        }
        
        .compare-property:nth-child(odd) {
            background: #f9f9f9;
        }
        
        .compare-label {
            color: #666;
        }
        
        .compare-value {
            font-weight: bold;
        }
        
        .vs-divider {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 0 10px;
        }
        
        .vs-circle {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: #ff6b6b;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            margin-bottom: 20px;
        }
        
        .vs-line {
            width: 2px;
            background: #eee;
            flex: 1;
        }
        
        /* 响应式适配 */
        @media (max-width: 768px) {
            .navbar {
                flex-direction: column;
                padding: 15px;
            }
            
            .nav-links {
                margin: 15px 0;
                width: 100%;
                overflow-x: auto;
                padding-bottom: 10px;
            }
            
            .user-actions {
                width: 100%;
                justify-content: space-between;
            }
            
            .search-box input {
                width: 100%;
            }
            
            .hero-section {
                flex-direction: column;
            }
            
            .detail-header {
                flex-direction: column;
            }
            
            .detail-image {
                width: 100%;
            }
            
            .profile-header {
                flex-direction: column;
                text-align: center;
            }
            
            .profile-stats {
                justify-content: center;
            }
            
            .profile-actions {
                justify-content: center;
            }
            
            .profile-content {
                flex-direction: column;
            }
            
            .profile-sidebar {
                width: 100%;
                margin-bottom: 20px;
            }
            
            .compare-container {
                flex-direction: column;
            }
            
            .vs-divider {
                flex-direction: row;
                padding: 20px 0;
            }
            
            .vs-circle {
                margin-bottom: 0;
                margin-right: 20px;
            }
            
            .vs-line {
                width: 100%;
                height: 2px;
            }
        }
        
        /* 原型导航 */
        .prototype-nav {
            position: fixed;
            top: 20px;
            right: 20px;
            background: white;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            padding: 15px;
            z-index: 1000;
        }
        
        .prototype-nav-title {
            font-weight: bold;
            margin-bottom: 10px;
            padding-bottom: 5px;
            border-bottom: 1px solid #eee;
        }
        
        .prototype-nav-links {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        
        .prototype-nav-link {
            color: #333;
            text-decoration: none;
            padding: 5px 0;
        }
        
        .prototype-nav-link:hover {
            color: #0078ff;
        }
    </style>
</head>
<body>
    <!-- 原型导航 -->
    <div class="prototype-nav">
        <div class="prototype-nav-title">原型导航</div>
        <div class="prototype-nav-links">
            <a href="#home" class="prototype-nav-link">首页</a>
            <a href="#car-list" class="prototype-nav-link">赛车列表</a>
            <a href="#car-detail" class="prototype-nav-link">赛车详情</a>
            <a href="#pet-list" class="prototype-nav-link">宠物列表</a>
            <a href="#pet-detail" class="prototype-nav-link">宠物详情</a>
            <a href="#compare" class="prototype-nav-link">比较工具</a>
            <a href="#user-profile" class="prototype-nav-link">用户中心</a>
            <a href="#login" class="prototype-nav-link">登录/注册</a>
        </div>
    </div>

    <div class="container">
        <h1 style="text-align: center; margin-bottom: 30px;">QQ飞车赛车图鉴 - 原型设计</h1>
        
        <!-- 首页 -->
        <div id="home" class="prototype-section">
            <div class="section-title"><i class="fas fa-home"></i> 首页</div>
            
            <!-- 导航栏 -->
            <div class="navbar">
                <div class="logo">
                    <i class="fas fa-car-side"></i>
                    QQ飞车图鉴
                </div>
                <div class="nav-links">
                    <a href="#"><i class="fas fa-home"></i> 首页</a>
                    <a href="#"><i class="fas fa-car"></i> 赛车图鉴</a>
                    <a href="#"><i class="fas fa-paw"></i> 宠物图鉴</a>
                    <a href="#"><i class="fas fa-balance-scale"></i> 比较工具</a>
                    <a href="#"><i class="far fa-comment-dots"></i> 社区</a>
                </div>
                <div class="user-actions">
                    <div class="search-box">
                        <i class="fas fa-search"></i>
                        <input type="text" placeholder="搜索赛车、宠物...">
                    </div>
                    <a href="#" style="color: white;"><i class="far fa-user"></i></a>
                </div>
            </div>
            
            <!-- 英雄区域 -->
            <div class="hero-section">
                <div class="hero-content">
                    <h1>探索QQ飞车的精彩世界</h1>
                    <p>浏览所有赛车和宠物的详细数据，找到最适合你的搭配，提升你的竞技水平。</p>
                    <button>开始探索 <i class="fas fa-arrow-right"></i></button>
                </div>
            </div>
            
            <!-- 热门赛车 -->
            <div class="featured-section">
                <div class="section-header">
                    <h2><i class="fas fa-fire"></i> 热门赛车</h2>
                    <a href="#" class="view-all">查看全部 <i class="fas fa-angle-right"></i></a>
                </div>
                <div class="card-grid">
                    <div class="card">
                        <div class="card-img" style="background-color: #3a8bff;">
                            <div class="card-badge">S级</div>
                        </div>
                        <div class="card-content">
                            <div class="card-title">雷诺特技车</div>
                            <div class="card-meta">
                                <div class="card-type">A车</div>
                                <div class="card-rating">
                                    <i class="fas fa-star"></i>
                                    <span>4.9 (120)</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-img" style="background-color: #ff6b6b;">
                            <div class="card-badge">A级</div>
                        </div>
                        <div class="card-content">
                            <div class="card-title">流星</div>
                            <div class="card-meta">
                                <div class="card-type">B车</div>
                                <div class="card-rating">
                                    <i class="fas fa-star"></i>
                                    <span>4.7 (98)</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-img" style="background-color: #20c997;">
                            <div class="card-badge">A级</div>
                        </div>
                        <div class="card-content">
                            <div class="card-title">剃刀</div>
                            <div class="card-meta">
                                <div class="card-type">A车</div>
                                <div class="card-rating">
                                    <i class="fas fa-star"></i>
                                    <span>4.6 (87)</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-img" style="background-color: #6f42c1;">
                            <div class="card-badge">B级</div>
                        </div>
                        <div class="card-content">
                            <div class="card-title">魔鲨</div>
                            <div class="card-meta">
                                <div class="card-type">B车</div>
                                <div class="card-rating">
                                    <i class="fas fa-star"></i>
                                    <span>4.5 (76)</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 热门宠物 -->
            <div class="featured-section">
                <div class="section-header">
                    <h2><i class="fas fa-paw"></i> 热门宠物</h2>
                    <a href="#" class="view-all">查看全部 <i class="fas fa-angle-right"></i></a>
                </div>
                <div class="card-grid">
                    <div class="card">
                        <div class="card-img" style="background-color: #fd7e14;">
                            <div class="card-badge">传说</div>
                        </div>
                        <div class="card-content">
                            <div class="card-title">小白龙</div>
                            <div class="card-meta">
                                <div class="card-type">辅助型</div>
                                <div class="card-rating">
                                    <i class="fas fa-star"></i>
                                    <span>4.9 (135)</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-img" style="background-color: #0dcaf0;">
                            <div class="card-badge">稀有</div>
                        </div>
                        <div class="card-content">
                            <div class="card-title">幻想猫</div>
                            <div class="card-meta">
                                <div class="card-type">攻击型</div>
                                <div class="card-rating">
                                    <i class="fas fa-star"></i>
                                    <span>4.8 (112)</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-img" style="background-color: #20c997;">
                            <div class="card-badge">普通</div>
                        </div>
                        <div class="card-content">
                            <div class="card-title">机械龟</div>
                            <div class="card-meta">
                                <div class="card-type">防御型</div>
                                <div class="card-rating">
                                    <i class="fas fa-star"></i>
                                    <span>4.6 (89)</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-img" style="background-color: #e83e8c;">
                            <div class="card-badge">稀有</div>
                        </div>
                        <div class="card-content">
                            <div class="card-title">幻翼天马</div>
                            <div class="card-meta">
                                <div class="card-type">速度型</div>
                                <div class="card-rating">
                                    <i class="fas fa-star"></i>
                                    <span>4.7 (104)</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 最新攻略 -->
            <div class="featured-section">
                <div class="section-header">
                    <h2><i class="fas fa-book"></i> 最新攻略</h2>
                    <a href="#" class="view-all">查看全部 <i class="fas fa-angle-right"></i></a>
                </div>
                <div class="card-grid">
                    <div class="card">
                        <div class="card-img" style="background-color: #6610f2;">
                            <div class="card-badge">技巧</div>
                        </div>
                        <div class="card-content">
                            <div class="card-title">赛道弯道技巧详解</div>
                            <div class="card-meta">
                                <div class="card-type">官方</div>
                                <div class="card-rating">
                                    <i class="fas fa-eye"></i>
                                    <span>2.3万</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-img" style="background-color: #fd7e14;">
                            <div class="card-badge">搭配</div>
                        </div>
                        <div class="card-content">
                            <div class="card-title">最佳赛车与宠物搭配指南</div>
                            <div class="card-meta">
                                <div class="card-type">玩家</div>
                                <div class="card-rating">
                                    <i class="fas fa-eye"></i>
                                    <span>1.8万</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 赛车列表页 -->
        <div id="car-list" class="prototype-section">
            <div class="section-title"><i class="fas fa-car"></i> 赛车图鉴</div>
            
            <!-- 筛选器 -->
            <div class="filters">
                <div class="filter-group">
                    <label>类型</label>
                    <select>
                        <option>全部</option>
                        <option>A车</option>
                        <option>B车</option>
                        <option>S车</option>
                    </select>
                </div>
                <div class="filter-group">
                    <label>等级</label>
                    <select>
                        <option>全部</option>
                        <option>S级</option>
                        <option>A级</option>
                        <option>B级</option>
                        <option>C级</option>
                    </select>
                </div>
                <div class="filter-group">
                    <label>平跑极速</label>
                    <div style="display: flex; gap: 5px;">
                        <input type="number" placeholder="最小值">
                        <input type="number" placeholder="最大值">
                    </div>
                </div>
                <div class="filter-group">
                    <label>氮气极速</label>
                    <div style="display: flex; gap: 5px;">
                        <input type="number" placeholder="最小值">
                        <input type="number" placeholder="最大值">
                    </div>
                </div>
                <div class="filter-group">
                    <label>飘逸速率</label>
                    <div style="display: flex; gap: 5px;">
                        <input type="number" placeholder="最小值">
                        <input type="number" placeholder="最大值">
                    </div>
                </div>
                <div class="filter-actions">
                    <button class="reset-btn">重置</button>
                    <button class="apply-btn">应用筛选</button>
                </div>
            </div>
            
            <!-- 列表视图 -->
            <div class="list-view">
                <div class="list-header">
                    <div class="view-options">
                        <button class="active"><i class="fas fa-th"></i></button>
                        <button><i class="fas fa-list"></i></button>
                    </div>
                    <div class="sort-options">
                        <span>排序:</span>
                        <select>
                            <option>热门程度</option>
                            <option>评分高低</option>
                            <option>平跑极速</option>
                            <option>氮气极速</option>
                        </select>
                    </div>
                </div>
                
                <div class="card-grid">
                    <div class="card">
                        <div class="card-img" style="background-color: #3a8bff;">
                            <div class="card-badge">S级</div>
                        </div>
                        <div class="card-content">
                            <div class="card-title">雷诺特技车</div>
                            <div class="card-meta">
                                <div class="card-type">A车</div>
                                <div class="card-rating">
                                    <i class="fas fa-star"></i>
                                    <span>4.9 (120)</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-img" style="background-color: #ff6b6b;">
                            <div class="card-badge">A级</div>
                        </div>
                        <div class="card-content">
                            <div class="card-title">流星</div>
                            <div class="card-meta">
                                <div class="card-type">B车</div>
                                <div class="card-rating">
                                    <i class="fas fa-star"></i>
                                    <span>4.7 (98)</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-img" style="background-color: #20c997;">
                            <div class="card-badge">A级</div>
                        </div>
                        <div class="card-content">
                            <div class="card-title">剃刀</div>
                            <div class="card-meta">
                                <div class="card-type">A车</div>
                                <div class="card-rating">
                                    <i class="fas fa-star"></i>
                                    <span>4.6 (87)</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-img" style="background-color: #6f42c1;">
                            <div class="card-badge">B级</div>
                        </div>
                        <div class="card-content">
                            <div class="card-title">魔鲨</div>
                            <div class="card-meta">
                                <div class="card-type">B车</div>
                                <div class="card-rating">
                                    <i class="fas fa-star"></i>
                                    <span>4.5 (76)</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-img" style="background-color: #fd7e14;">
                            <div class="card-badge">S级</div>
                        </div>
                        <div class="card-content">
                            <div class="card-title">银色幻影</div>
                            <div class="card-meta">
                                <div class="card-type">S车</div>
                                <div class="card-rating">
                                    <i class="fas fa-star"></i>
                                    <span>4.8 (110)</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-img" style="background-color: #0dcaf0;">
                            <div class="card-badge">A级</div>
                        </div>
                        <div class="card-content">
                            <div class="card-title">烈焰风暴</div>
                            <div class="card-meta">
                                <div class="card-type">A车</div>
                                <div class="card-rating">
                                    <i class="fas fa-star"></i>
                                    <span>4.7 (93)</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-img" style="background-color: #dc3545;">
                            <div class="card-badge">B级</div>
                        </div>
                        <div class="card-content">
                            <div class="card-title">红莲爆裂</div>
                            <div class="card-meta">
                                <div class="card-type">B车</div>
                                <div class="card-rating">
                                    <i class="fas fa-star"></i>
                                    <span>4.4 (68)</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-img" style="background-color: #6c757d;">
                            <div class="card-badge">C级</div>
                        </div>
                        <div class="card-content">
                            <div class="card-title">幽灵战车</div>
                            <div class="card-meta">
                                <div class="card-type">C车</div>
                                <div class="card-rating">
                                    <i class="fas fa-star"></i>
                                    <span>4.2 (45)</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 分页 -->
                <div class="pagination">
                    <button><i class="fas fa-angle-left"></i></button>
                    <button class="active">1</button>
                    <button>2</button>
                    <button>3</button>
                    <button>...</button>
                    <button>10</button>
                    <button><i class="fas fa-angle-right"></i></button>
                </div>
            </div>
        </div>
        
        <!-- 赛车详情页 -->
        <div id="car-detail" class="prototype-section">
            <div class="section-title"><i class="fas fa-car"></i> 赛车详情</div>
            
            <!-- 详情头部 -->
            <div class="detail-header">
                <div class="detail-image" style="background-color: #3a8bff;">
                    <div class="image-nav">
                        <div class="image-nav-dot active"></div>
                        <div class="image-nav-dot"></div>
                        <div class="image-nav-dot"></div>
                    </div>
                </div>
                <div class="detail-info">
                    <div class="detail-title">
                        <span>雷诺特技车</span>
                        <div class="btn-group">
                            <button class="btn-outline"><i class="far fa-heart"></i> 收藏</button>
                            <button class="btn-primary"><i class="fas fa-share-alt"></i> 分享</button>
                        </div>
                    </div>
                    <div class="detail-meta">
                        <div><i class="fas fa-tag"></i> A车</div>
                        <div><i class="fas fa-trophy"></i> S级</div>
                        <div><i class="fas fa-eye"></i> 12,536次查看</div>
                    </div>
                    
                    <div class="rating-large">
                        <div class="stars">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                        </div>
                        <div class="rating-value">4.9</div>
                        <div class="rating-count">(120人评分)</div>
                    </div>
                    
                    <table class="property-table">
                        <tr>
                            <th>平跑极速</th>
                            <td>86.5 km/h</td>
                        </tr>
                        <tr>
                            <th>氮气极速</th>
                            <td>104.5 km/h</td>
                        </tr>
                        <tr>
                            <th>车重</th>
                            <td>1.8 t</td>
                        </tr>
                        <tr>
                            <th>飘逸速率</th>
                            <td>92%</td>
                        </tr>
                        <tr>
                            <th>摩擦系数</th>
                            <td>0.65</td>
                        </tr>
                        <tr>
                            <th>最小转向</th>
                            <td>0.42</td>
                        </tr>
                        <tr>
                            <th>最大转向</th>
                            <td>0.87</td>
                        </tr>
                        <tr>
                            <th>悬挂</th>
                            <td>专业减震</td>
                        </tr>
                    </table>
                </div>
            </div>
            
            <!-- 评分区域 -->
            <div style="margin: 20px 0; padding: 20px; background: #f9f9f9; border-radius: 10px;">
                <h3 style="margin-bottom: 15px;">为这款赛车评分</h3>
                <div style="font-size: 30px; color: #ddd;">
                    <i class="far fa-star" style="cursor: pointer;"></i>
                    <i class="far fa-star" style="cursor: pointer;"></i>
                    <i class="far fa-star" style="cursor: pointer;"></i>
                    <i class="far fa-star" style="cursor: pointer;"></i>
                    <i class="far fa-star" style="cursor: pointer;"></i>
                </div>
            </div>
            
            <!-- 标签页 -->
            <div class="tabs">
                <div class="tab active">简介</div>
                <div class="tab">特点分析</div>
                <div class="tab">兼容宠物</div>
                <div class="tab">评论 (38)</div>
            </div>
            
            <div class="tab-content">
                <p>雷诺特技车是QQ飞车中的顶级A车之一，由于其优秀的性能和平衡的属性分配，成为了众多职业玩家的首选。该车在直道和弯道中都有出色表现，特别是在飘逸和漂移方面有着独特优势。</p>
                <p style="margin-top: 10px;">该车最初于2010年推出，经过多次调整优化，现已成为游戏中最受欢迎的赛车之一。无论是竞速还是道具赛，雷诺特技车都能发挥出色。</p>
            </div>
            
            <!-- 评论区 -->
            <div class="comments-section">
                <h3 style="margin-bottom: 20px;">评论区</h3>
                
                <div class="comment-form">
                    <textarea placeholder="分享你对这款赛车的看法..."></textarea>
                    <div class="form-actions">
                        <button class="btn-primary">发表评论</button>
                    </div>
                </div>
                
                <div class="comment-list">
                    <div class="comment">
                        <div class="comment-header">
                            <div class="commenter">
                                <div class="commenter-avatar"></div>
                                <div>
                                    <div class="commenter-name">赛车达人</div>
                                    <div class="comment-date">2023-06-15</div>
                                </div>
                            </div>
                            <div class="comment-rating">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                            </div>
                        </div>
                        <div class="comment-content">
                            这款车是我用过最好的A车，漂移手感非常舒适，在高速弯道中尤其有优势。搭配幻想猫使用效果更佳。强烈推荐新手入手！
                        </div>
                        <div class="comment-actions">
                            <div class="comment-action"><i class="far fa-thumbs-up"></i> 喜欢 (23)</div>
                            <div class="comment-action"><i class="far fa-comment"></i> 回复</div>
                        </div>
                    </div>
                    
                    <div class="comment">
                        <div class="comment-header">
                            <div class="commenter">
                                <div class="commenter-avatar"></div>
                                <div>
                                    <div class="commenter-name">飞车小白</div>
                                    <div class="comment-date">2023-06-10</div>
                                </div>
                            </div>
                            <div class="comment-rating">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="far fa-star"></i>
                            </div>
                        </div>
                        <div class="comment-content">
                            刚入手这款车，经过一周的练习逐渐适应了它的特性。优点是漂移很顺畅，缺点是起步稍慢。总体来说性价比很高，值得购买。
                        </div>
                        <div class="comment-actions">
                            <div class="comment-action"><i class="far fa-thumbs-up"></i> 喜欢 (15)</div>
                            <div class="comment-action"><i class="far fa-comment"></i> 回复</div>
                        </div>
                    </div>
                </div>
                
                <!-- 查看更多评论 -->
                <div style="text-align: center; margin-top: 20px;">
                    <button class="btn-outline" style="padding: 10px 20px;">查看更多评论</button>
                </div>
            </div>
        </div>
        
        <!-- 宠物列表页 -->
        <div id="pet-list" class="prototype-section">
            <div class="section-title"><i class="fas fa-paw"></i> 宠物图鉴</div>
            
            <!-- 筛选器 -->
            <div class="filters">
                <div class="filter-group">
                    <label>类型</label>
                    <select>
                        <option>全部</option>
                        <option>攻击型</option>
                        <option>防御型</option>
                        <option>辅助型</option>
                        <option>速度型</option>
                    </select>
                </div>
                <div class="filter-group">
                    <label>稀有度</label>
                    <select>
                        <option>全部</option>
                        <option>传说</option>
                        <option>稀有</option>
                        <option>普通</option>
                    </select>
                </div>
                <div class="filter-group">
                    <label>战斗力</label>
                    <div style="display: flex; gap: 5px;">
                        <input type="number" placeholder="最小值">
                        <input type="number" placeholder="最大值">
                    </div>
                </div>
                <div class="filter-group">
                    <label>技能类型</label>
                    <select>
                        <option>全部</option>
                        <option>加速</option>
                        <option>防护</option>
                        <option>攻击</option>
                        <option>干扰</option>
                    </select>
                </div>
                <div class="filter-actions">
                    <button class="reset-btn">重置</button>
                    <button class="apply-btn">应用筛选</button>
                </div>
            </div>
            
            <!-- 列表视图 -->
            <div class="list-view">
                <div class="list-header">
                    <div class="view-options">
                        <button class="active"><i class="fas fa-th"></i></button>
                        <button><i class="fas fa-list"></i></button>
                    </div>
                    <div class="sort-options">
                        <span>排序:</span>
                        <select>
                            <option>热门程度</option>
                            <option>评分高低</option>
                            <option>战斗力</option>
                            <option>获取难度</option>
                        </select>
                    </div>
                </div>
                
                <div class="card-grid">
                    <div class="card">
                        <div class="card-img" style="background-color: #fd7e14;">
                            <div class="card-badge">传说</div>
                        </div>
                        <div class="card-content">
                            <div class="card-title">小白龙</div>
                            <div class="card-meta">
                                <div class="card-type">辅助型</div>
                                <div class="card-rating">
                                    <i class="fas fa-star"></i>
                                    <span>4.9 (135)</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-img" style="background-color: #0dcaf0;">
                            <div class="card-badge">稀有</div>
                        </div>
                        <div class="card-content">
                            <div class="card-title">幻想猫</div>
                            <div class="card-meta">
                                <div class="card-type">攻击型</div>
                                <div class="card-rating">
                                    <i class="fas fa-star"></i>
                                    <span>4.8 (112)</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-img" style="background-color: #20c997;">
                            <div class="card-badge">普通</div>
                        </div>
                        <div class="card-content">
                            <div class="card-title">机械龟</div>
                            <div class="card-meta">
                                <div class="card-type">防御型</div>
                                <div class="card-rating">
                                    <i class="fas fa-star"></i>
                                    <span>4.6 (89)</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-img" style="background-color: #e83e8c;">
                            <div class="card-badge">稀有</div>
                        </div>
                        <div class="card-content">
                            <div class="card-title">幻翼天马</div>
                            <div class="card-meta">
                                <div class="card-type">速度型</div>
                                <div class="card-rating">
                                    <i class="fas fa-star"></i>
                                    <span>4.7 (104)</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-img" style="background-color: #6f42c1;">
                            <div class="card-badge">传说</div>
                        </div>
                        <div class="card-content">
                            <div class="card-title">九尾狐</div>
                            <div class="card-meta">
                                <div class="card-type">攻击型</div>
                                <div class="card-rating">
                                    <i class="fas fa-star"></i>
                                    <span>4.8 (118)</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-img" style="background-color: #6c757d;">
                            <div class="card-badge">普通</div>
                        </div>
                        <div class="card-content">
                            <div class="card-title">机械鼠</div>
                            <div class="card-meta">
                                <div class="card-type">辅助型</div>
                                <div class="card-rating">
                                    <i class="fas fa-star"></i>
                                    <span>4.3 (67)</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-img" style="background-color: #dc3545;">
                            <div class="card-badge">稀有</div>
                        </div>
                        <div class="card-content">
                            <div class="card-title">火焰狮</div>
                            <div class="card-meta">
                                <div class="card-type">攻击型</div>
                                <div class="card-rating">
                                    <i class="fas fa-star"></i>
                                    <span>4.5 (96)</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-img" style="background-color: #198754;">
                            <div class="card-badge">传说</div>
                        </div>
                        <div class="card-content">
                            <div class="card-title">星际龙</div>
                            <div class="card-meta">
                                <div class="card-type">速度型</div>
                                <div class="card-rating">
                                    <i class="fas fa-star"></i>
                                    <span>4.9 (128)</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 分页 -->
                <div class="pagination">
                    <button><i class="fas fa-angle-left"></i></button>
                    <button class="active">1</button>
                    <button>2</button>
                    <button>3</button>
                    <button>...</button>
                    <button>8</button>
                    <button><i class="fas fa-angle-right"></i></button>
                </div>
            </div>
        </div>
        
        <!-- 宠物详情页 -->
        <div id="pet-detail" class="prototype-section">
            <div class="section-title"><i class="fas fa-paw"></i> 宠物详情</div>
            
            <!-- 详情头部 -->
            <div class="detail-header">
                <div class="detail-image" style="background-color: #fd7e14;">
                    <div class="image-nav">
                        <div class="image-nav-dot active"></div>
                        <div class="image-nav-dot"></div>
                        <div class="image-nav-dot"></div>
                    </div>
                </div>
                <div class="detail-info">
                    <div class="detail-title">
                        <span>小白龙</span>
                        <div class="btn-group">
                            <button class="btn-outline"><i class="far fa-heart"></i> 收藏</button>
                            <button class="btn-primary"><i class="fas fa-share-alt"></i> 分享</button>
                        </div>
                    </div>
                    <div class="detail-meta">
                        <div><i class="fas fa-tag"></i> 辅助型</div>
                        <div><i class="fas fa-gem"></i> 传说</div>
                        <div><i class="fas fa-eye"></i> 15,782次查看</div>
                    </div>
                    
                    <div class="rating-large">
                        <div class="stars">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                        </div>
                        <div class="rating-value">4.9</div>
                        <div class="rating-count">(135人评分)</div>
                    </div>
                    
                    <table class="property-table">
                        <tr>
                            <th>基础技能</th>
                            <td>瞬间加速（提升10%加速度）</td>
                        </tr>
                        <tr>
                            <th>强化技能</th>
                            <td>龙息护盾（10秒防护罩效果）</td>
                        </tr>
                        <tr>
                            <th>资质</th>
                            <td>S级</td>
                        </tr>
                        <tr>
                            <th>战斗力</th>
                            <td>9600</td>
                        </tr>
                        <tr>
                            <th>形态</th>
                            <td>幼年期、成长期、成熟期</td>
                        </tr>
                        <tr>
                            <th>普通技能</th>
                            <td>龙之祝福（赛道加速区域效果提升30%）</td>
                        </tr>
                        <tr>
                            <th>强化技能</th>
                            <td>龙威（对附近敌人造成减速效果，持续3秒）</td>
                        </tr>
                    </table>
                </div>
            </div>
            
            <!-- 评分区域 -->
            <div style="margin: 20px 0; padding: 20px; background: #f9f9f9; border-radius: 10px;">
                <h3 style="margin-bottom: 15px;">为这只宠物评分</h3>
                <div style="font-size: 30px; color: #ddd;">
                    <i class="far fa-star" style="cursor: pointer;"></i>
                    <i class="far fa-star" style="cursor: pointer;"></i>
                    <i class="far fa-star" style="cursor: pointer;"></i>
                    <i class="far fa-star" style="cursor: pointer;"></i>
                    <i class="far fa-star" style="cursor: pointer;"></i>
                </div>
            </div>
            
            <!-- 标签页 -->
            <div class="tabs">
                <div class="tab active">简介</div>
                <div class="tab">使用技巧</div>
                <div class="tab">最佳搭配</div>
                <div class="tab">评论 (52)</div>
            </div>
            
            <div class="tab-content">
                <p>小白龙是QQ飞车中的传说级宠物，作为游戏中最稀有和强大的宠物之一，它拥有出色的辅助能力和不俗的攻击性能。其特殊技能"龙息护盾"可以在关键时刻提供无敌保护，帮助玩家应对各种赛道危险和敌人攻击。</p>
                <p style="margin-top: 10px;">该宠物有三种进化形态，每次进化都会显著提升其属性和技能效果。最终形态的小白龙拥有华丽的外观和全面的能力加成，是许多竞技玩家的首选宠物。</p>
            </div>
            
            <!-- 评论区 -->
            <div class="comments-section">
                <h3 style="margin-bottom: 20px;">评论区</h3>
                
                <div class="comment-form">
                    <textarea placeholder="分享你对这只宠物的看法..."></textarea>
                    <div class="form-actions">
                        <button class="btn-primary">发表评论</button>
                    </div>
                </div>
                
                <div class="comment-list">
                    <div class="comment">
                        <div class="comment-header">
                            <div class="commenter">
                                <div class="commenter-avatar"></div>
                                <div>
                                    <div class="commenter-name">宠物大师</div>
                                    <div class="comment-date">2023-06-18</div>
                                </div>
                            </div>
                            <div class="comment-rating">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                            </div>
                        </div>
                        <div class="comment-content">
                            这是目前游戏中最强的宠物，没有之一！特别是在竞速模式中，龙息护盾能帮你避开所有障碍和攻击，关键时刻救你一命。搭配雷诺特技车简直无敌！虽然获取难度很大，但绝对值得投入资源。
                        </div>
                        <div class="comment-actions">
                            <div class="comment-action"><i class="far fa-thumbs-up"></i> 喜欢 (37)</div>
                            <div class="comment-action"><i class="far fa-comment"></i> 回复</div>
                        </div>
                    </div>
                    
                    <div class="comment">
                        <div class="comment-header">
                            <div class="commenter">
                                <div class="commenter-avatar"></div>
                                <div>
                                    <div class="commenter-name">竞速玩家</div>
                                    <div class="comment-date">2023-06-12</div>
                                </div>
                            </div>
                            <div class="comment-rating">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star-half-alt"></i>
                            </div>
                        </div>
                        <div class="comment-content">
                            入手小白龙后明显感觉赛道成绩提升，尤其是"龙之祝福"技能让我在加速区获得了额外优势。不过这只宠物的培养成本较高，需要大量资源才能发挥出全部潜力。建议有一定游戏经验的玩家再尝试获取。
                        </div>
                        <div class="comment-actions">
                            <div class="comment-action"><i class="far fa-thumbs-up"></i> 喜欢 (19)</div>
                            <div class="comment-action"><i class="far fa-comment"></i> 回复</div>
                        </div>
                    </div>
                </div>
                
                <!-- 查看更多评论 -->
                <div style="text-align: center; margin-top: 20px;">
                    <button class="btn-outline" style="padding: 10px 20px;">查看更多评论</button>
                </div>
            </div>
        </div>
        
        <!-- 比较工具 -->
        <div id="compare" class="prototype-section">
            <div class="section-title"><i class="fas fa-balance-scale"></i> 比较工具</div>
            
            <div style="margin-bottom: 20px; display: flex; gap: 20px;">
                <div style="flex: 1;">
                    <label style="display: block; margin-bottom: 5px;">选择赛车1</label>
                    <select style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px;">
                        <option>雷诺特技车</option>
                        <option>流星</option>
                        <option>剃刀</option>
                        <option>魔鲨</option>
                        <option>银色幻影</option>
                    </select>
                </div>
                <div style="flex: 1;">
                    <label style="display: block; margin-bottom: 5px;">选择赛车2</label>
                    <select style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px;">
                        <option>流星</option>
                        <option>雷诺特技车</option>
                        <option>剃刀</option>
                        <option>魔鲨</option>
                        <option>银色幻影</option>
                    </select>
                </div>
            </div>
            
            <div class="compare-container">
                <div class="compare-item">
                    <div class="compare-image" style="background-color: #3a8bff;"></div>
                    <div class="compare-title">雷诺特技车</div>
                    <div class="compare-properties">
                        <div class="compare-property">
                            <div class="compare-label">平跑极速</div>
                            <div class="compare-value">86.5 km/h</div>
                        </div>
                        <div class="compare-property">
                            <div class="compare-label">氮气极速</div>
                            <div class="compare-value">104.5 km/h</div>
                        </div>
                        <div class="compare-property">
                            <div class="compare-label">车重</div>
                            <div class="compare-value">1.8 t</div>
                        </div>
                        <div class="compare-property">
                            <div class="compare-label">飘逸速率</div>
                            <div class="compare-value">92%</div>
                        </div>
                        <div class="compare-property">
                            <div class="compare-label">摩擦系数</div>
                            <div class="compare-value">0.65</div>
                        </div>
                        <div class="compare-property">
                            <div class="compare-label">最小转向</div>
                            <div class="compare-value">0.42</div>
                        </div>
                        <div class="compare-property">
                            <div class="compare-label">最大转向</div>
                            <div class="compare-value">0.87</div>
                        </div>
                        <div class="compare-property">
                            <div class="compare-label">悬挂</div>
                            <div class="compare-value">专业减震</div>
                        </div>
                        <div class="compare-property">
                            <div class="compare-label">评分</div>
                            <div class="compare-value">4.9</div>
                        </div>
                    </div>
                </div>
                
                <div class="vs-divider">
                    <div class="vs-circle">VS</div>
                    <div class="vs-line"></div>
                </div>
                
                <div class="compare-item">
                    <div class="compare-image" style="background-color: #ff6b6b;"></div>
                    <div class="compare-title">流星</div>
                    <div class="compare-properties">
                        <div class="compare-property">
                            <div class="compare-label">平跑极速</div>
                            <div class="compare-value">82.5 km/h</div>
                        </div>
                        <div class="compare-property">
                            <div class="compare-label">氮气极速</div>
                            <div class="compare-value">98.5 km/h</div>
                        </div>
                        <div class="compare-property">
                            <div class="compare-label">车重</div>
                            <div class="compare-value">1.6 t</div>
                        </div>
                        <div class="compare-property">
                            <div class="compare-label">飘逸速率</div>
                            <div class="compare-value">88%</div>
                        </div>
                        <div class="compare-property">
                            <div class="compare-label">摩擦系数</div>
                            <div class="compare-value">0.72</div>
                        </div>
                        <div class="compare-property">
                            <div class="compare-label">最小转向</div>
                            <div class="compare-value">0.45</div>
                        </div>
                        <div class="compare-property">
                            <div class="compare-label">最大转向</div>
                            <div class="compare-value">0.90</div>
                        </div>
                        <div class="compare-property">
                            <div class="compare-label">悬挂</div>
                            <div class="compare-value">标准配置</div>
                        </div>
                        <div class="compare-property">
                            <div class="compare-label">评分</div>
                            <div class="compare-value">4.7</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div style="margin-top: 30px; text-align: center;">
                <button class="btn-primary" style="padding: 10px 20px;">生成详细对比报告</button>
            </div>
            
            <div style="margin-top: 40px; border-top: 1px solid #eee; padding-top: 20px;">
                <h3 style="margin-bottom: 20px;">宠物比较</h3>
                
                <div style="margin-bottom: 20px; display: flex; gap: 20px;">
                    <div style="flex: 1;">
                        <label style="display: block; margin-bottom: 5px;">选择宠物1</label>
                        <select style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px;">
                            <option>小白龙</option>
                            <option>幻想猫</option>
                            <option>机械龟</option>
                            <option>幻翼天马</option>
                            <option>九尾狐</option>
                        </select>
                    </div>
                    <div style="flex: 1;">
                        <label style="display: block; margin-bottom: 5px;">选择宠物2</label>
                        <select style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px;">
                            <option>幻想猫</option>
                            <option>小白龙</option>
                            <option>机械龟</option>
                            <option>幻翼天马</option>
                            <option>九尾狐</option>
                        </select>
                    </div>
                </div>
                
                <div class="compare-container">
                    <div class="compare-item">
                        <div class="compare-image" style="background-color: #fd7e14;"></div>
                        <div class="compare-title">小白龙</div>
                        <div class="compare-properties">
                            <div class="compare-property">
                                <div class="compare-label">基础技能</div>
                                <div class="compare-value">瞬间加速（提升10%加速度）</div>
                            </div>
                            <div class="compare-property">
                                <div class="compare-label">强化技能</div>
                                <div class="compare-value">龙息护盾（10秒防护罩效果）</div>
                            </div>
                            <div class="compare-property">
                                <div class="compare-label">资质</div>
                                <div class="compare-value">S级</div>
                            </div>
                            <div class="compare-property">
                                <div class="compare-label">战斗力</div>
                                <div class="compare-value">9600</div>
                            </div>
                            <div class="compare-property">
                                <div class="compare-label">稀有度</div>
                                <div class="compare-value">传说</div>
                            </div>
                            <div class="compare-property">
                                <div class="compare-label">评分</div>
                                <div class="compare-value">4.9</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="vs-divider">
                        <div class="vs-circle">VS</div>
                        <div class="vs-line"></div>
                    </div>
                    
                    <div class="compare-item">
                        <div class="compare-image" style="background-color: #0dcaf0;"></div>
                        <div class="compare-title">幻想猫</div>
                        <div class="compare-properties">
                            <div class="compare-property">
                                <div class="compare-label">基础技能</div>
                                <div class="compare-value">幻影突袭（干扰视野3秒）</div>
                            </div>
                            <div class="compare-property">
                                <div class="compare-label">强化技能</div>
                                <div class="compare-value">幻影分身（制造假目标干扰对手）</div>
                            </div>
                            <div class="compare-property">
                                <div class="compare-label">资质</div>
                                <div class="compare-value">A级</div>
                            </div>
                            <div class="compare-property">
                                <div class="compare-label">战斗力</div>
                                <div class="compare-value">8200</div>
                            </div>
                            <div class="compare-property">
                                <div class="compare-label">稀有度</div>
                                <div class="compare-value">稀有</div>
                            </div>
                            <div class="compare-property">
                                <div class="compare-label">评分</div>
                                <div class="compare-value">4.8</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div style="margin-top: 30px; text-align: center;">
                    <button class="btn-primary" style="padding: 10px 20px;">生成详细对比报告</button>
                </div>
            </div>
        </div>
        
        <!-- 用户中心 -->
        <div id="user-profile" class="prototype-section">
            <div class="section-title"><i class="fas fa-user"></i> 用户中心</div>
            
            <div class="profile-header">
                <div class="profile-avatar">
                    <div class="edit-avatar">更换头像</div>
                </div>
                <div class="profile-info">
                    <div class="profile-name">飞车玩家123</div>
                    <div class="profile-bio">热爱QQ飞车的老玩家，专注于竞速道具赛</div>
                    <div class="profile-stats">
                        <div class="stat">
                            <div class="stat-value">24</div>
                            <div class="stat-label">收藏</div>
                        </div>
                        <div class="stat">
                            <div class="stat-value">56</div>
                            <div class="stat-label">评论</div>
                        </div>
                        <div class="stat">
                            <div class="stat-value">192</div>
                            <div class="stat-label">获赞</div>
                        </div>
                    </div>
                </div>
                <div class="profile-actions">
                    <button class="btn-primary"><i class="fas fa-edit"></i> 编辑资料</button>
                </div>
            </div>
            
            <div class="profile-content">
                <div class="profile-sidebar">
                    <div class="profile-menu">
                        <div class="profile-menu-item active"><i class="fas fa-user-circle"></i> 个人资料</div>
                        <div class="profile-menu-item"><i class="fas fa-heart"></i> 我的收藏</div>
                        <div class="profile-menu-item"><i class="fas fa-comment-dots"></i> 我的评论</div>
                        <div class="profile-menu-item"><i class="fas fa-history"></i> 浏览历史</div>
                        <div class="profile-menu-item"><i class="fas fa-cog"></i> 账号设置</div>
                        <div class="profile-menu-item"><i class="fas fa-sign-out-alt"></i> 退出登录</div>
                    </div>
                </div>
                <div class="profile-main">
                    <h3 style="margin-bottom: 20px;">个人资料</h3>
                    
                    <div class="form-group">
                        <label>用户名</label>
                        <input type="text" value="飞车玩家123">
                    </div>
                    <div class="form-group">
                        <label>邮箱</label>
                        <input type="email" value="player123@example.com">
                    </div>
                    <div class="form-group">
                        <label>个人简介</label>
                        <textarea>热爱QQ飞车的老玩家，专注于竞速道具赛</textarea>
                    </div>
                    <div class="form-group">
                        <label>我的标签</label>
                        <input type="text" value="竞速,A车玩家,道具赛,资深玩家">
                        <div style="margin-top: 5px; font-size: 12px; color: #666;">使用逗号分隔多个标签</div>
                    </div>
                    <div class="form-group">
                        <label>性别</label>
                        <select>
                            <option>男</option>
                            <option>女</option>
                            <option>保密</option>
                        </select>
                    </div>
                    
                    <div style="margin-top: 30px;">
                        <button class="btn-primary" style="padding: 10px 20px;">保存修改</button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 登录/注册 -->
        <div id="login" class="prototype-section">
            <div class="section-title"><i class="fas fa-sign-in-alt"></i> 登录/注册</div>
            
            <div style="display: flex; gap: 30px; margin-top: 20px;">
                <!-- 登录表单 -->
                <div style="flex: 1; background: white; padding: 30px; border-radius: 10px; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);">
                    <h3 style="margin-bottom: 20px; text-align: center;">登录</h3>
                    
                    <div class="form-group">
                        <label>用户名/邮箱</label>
                        <input type="text" placeholder="请输入用户名或邮箱">
                    </div>
                    <div class="form-group">
                        <label>密码</label>
                        <input type="password" placeholder="请输入密码">
                    </div>
                    <div style="display: flex; justify-content: space-between; margin-bottom: 20px;">
                        <label style="display: flex; align-items: center; gap: 5px;">
                            <input type="checkbox"> 记住我
                        </label>
                        <a href="#" style="color: #0078ff; text-decoration: none;">忘记密码?</a>
                    </div>
                    <button class="btn-primary" style="width: 100%; padding: 12px;">登录</button>
                    
                    <div style="margin-top: 20px; text-align: center;">
                        <p>或使用第三方账号登录</p>
                        <div style="display: flex; justify-content: center; gap: 15px; margin-top: 10px;">
                            <button style="width: 40px; height: 40px; border-radius: 50%; background: #3b5998; color: white; border: none;"><i class="fab fa-qq"></i></button>
                            <button style="width: 40px; height: 40px; border-radius: 50%; background: #1da1f2; color: white; border: none;"><i class="fab fa-weixin"></i></button>
                            <button style="width: 40px; height: 40px; border-radius: 50%; background: #db4437; color: white; border: none;"><i class="fab fa-weibo"></i></button>
                        </div>
                    </div>
                </div>
                
                <!-- 注册表单 -->
                <div style="flex: 1; background: white; padding: 30px; border-radius: 10px; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);">
                    <h3 style="margin-bottom: 20px; text-align: center;">注册</h3>
                    
                    <div class="form-group">
                        <label>用户名</label>
                        <input type="text" placeholder="请设置用户名">
                    </div>
                    <div class="form-group">
                        <label>邮箱</label>
                        <input type="email" placeholder="请输入邮箱">
                    </div>
                    <div class="form-group">
                        <label>密码</label>
                        <input type="password" placeholder="请设置密码">
                    </div>
                    <div class="form-group">
                        <label>确认密码</label>
                        <input type="password" placeholder="请再次输入密码">
                    </div>
                    <div style="margin-bottom: 20px;">
                        <label style="display: flex; align-items: center; gap: 5px;">
                            <input type="checkbox"> 我已阅读并同意<a href="#" style="color: #0078ff;">用户协议</a>和<a href="#" style="color: #0078ff;">隐私政策</a>
                        </label>
                    </div>
                    <button class="btn-primary" style="width: 100%; padding: 12px;">注册</button>
                </div>
            </div>
        </div>
    </div>
    
    <footer style="text-align: center; margin-top: 50px; padding: 20px; color: #666; font-size: 14px;">
        <p>QQ飞车赛车图鉴 - 原型设计</p>
        <p style="margin-top: 10px;">© 2023 QQ飞车图鉴. 所有权利保留.</p>
    </footer>
</body>
</html>